<template>
	<div class="bg-white w-full h-full">
		<t-form 
		:data="updateInitialData" 
		class="p-8" 
		name="updateInitialForm" 
		labelAlign="top"
		@reset="updateInitialReset"
		@submit="updateInitialSubmit"
		:rules="updateInitialRules"
		v-if="isButtonAuthority('初始化考勤系统')"
		>
			<h5 class="text-base">考勤初始化</h5>
			<div class="flex mt-4">
				<t-form-item name="init_day" class="w-80" label="考勤起始日">
					<t-input-number
					v-model="updateInitialData.init_day"
					placeholder="请输入考勤起始日"
					class="w-60"
					></t-input-number>
				</t-form-item>
				<t-form-item name="rest_day" class="w-80 pl-8" label="调休初始天数">
					<t-input-number
					v-model="updateInitialData.rest_day"
					placeholder="请输入调休初始天数"
					class="w-60"
					></t-input-number>
				</t-form-item>
			</div>
			<div class="flex mt-4">
				<t-button theme="default" type="reset">重置</t-button>
				<t-button class="ml-4" type="submit">立即提交</t-button>
			</div>
			<p class="text-gray-400 mt-8">注意：</p>
			<p class="text-gray-400">考勤起始日即新一轮考勤开启日，考勤起始日修改后，会从本轮考勤开始刷新考勤统计，不影响上一轮考勤。调休初始天数修改后，会从下轮考勤开始生效。</p>
			<p class="text-gray-400">该功能在使用过程极易造成当前考勤统计的混乱，建议在初次使用本系统时使用该功能</p>
		</t-form>
		<t-divider v-if="isButtonAuthority('初始化考勤系统') && isButtonAuthority('节假日发布')"></t-divider>
		<t-form
		:data="holidaysRestData"
		class="p-8"
		name="holidaysRestForm"
		labelAlign="top"
		@reset="holidaysRestReset"
		@submit="holidaysRestSubmit"
		:rules="holidaysRestRules"
		v-if="isButtonAuthority('节假日发布')"
		>
			<h5 class="text-base">节假日发布</h5>
			<t-form-item name="holiday_name" class="w-80 pt-4" label="节假日名称">
				<t-input
				class="w-full"
				v-model="holidaysRestData.holiday_name"
				placeholder="请输入节假日名称"
				></t-input>
			</t-form-item>
			<div class="flex mt-4">
				<t-form-item name="holiday_start_date" class="w-80" label="节假日开始日期">
					<t-date-picker
					class="w-full"
					v-model="holidaysRestData.holiday_start_date"
					placeholder="请选择节假日开始日期"
					:disable-date="{
						before: today,
						after: nextDay
					}"
					></t-date-picker>
				</t-form-item>
				<t-form-item name="holiday_end_date" class="w-80 pl-8" label="节假日结束日期">
					<t-date-picker
					class="w-full"
					v-model="holidaysRestData.holiday_end_date"
					:disable-date="{
						before: today,
						after: nextDay
					}"
					placeholder="请选择节假日结束日期"
					></t-date-picker>
				</t-form-item>
			</div>
			<t-form-item name="holiday_rest_day" class="w-80" label="本轮考勤总计休息">
				<t-input-number
				class="w-full"
				v-model="holidaysRestData.holiday_rest_day"
				placeholder="请输入本轮考勤总共可休息多少天"
				></t-input-number>
			</t-form-item>
			<div class="flex mt-4">
				<t-button theme="default" type="reset">重置</t-button>
				<t-button class="ml-4" type="submit">立即提交</t-button>
			</div>
			<p class="text-gray-400 mt-8">注意：</p>
			<p class="text-gray-400">1.只能发布本轮考勤的节假日调休，不可预先发布下轮考勤及之后考勤的调休安排。</p>
			<p class="text-gray-400">2.节假日发布后，会根据设置的规则自动为公司所有员工安排调休，此操作不可撤销，请谨慎填写。</p>
		</t-form>
		<t-dialog
			header="节假日发布"
			:visible.sync="visibleModal"
			:onConfirm="onConfirm"
			>
			<div slot="body">
				<p>
					您即将发布一条名为
					<span class="text-blue-700">{{holidaysRestData.holiday_name}}</span>
					节假日调休，调休时间为
					<span class="text-blue-700">{{holidaysRestData.holiday_start_date}}</span>
					至
					<span class="text-blue-700">{{holidaysRestData.holiday_end_date}}</span>
					，共计休息
					<span class="text-blue-700">{{holidayDays}}</span>
					天，本轮考勤总计调休
					<span class="text-blue-700">{{holidaysRestData.holiday_rest_day}}</span>
					天</p>
			</div>
		</t-dialog>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	
	export default {
		name: 'Setting',
		data() {
			return {
				updateInitialData: {
					init_day: '',
					rest_day: ''
				},
				updateInitialRules: {
					init_day: [{required: true, message: '考勤起始日必填', type: 'error'}],
					rest_day: [{required: true, message: '调休初始天数必填', type: 'error'}]
				},
				holidaysRestData: {
					holiday_name: '',
					holiday_start_date: '',
					holiday_end_date: '',
					holiday_rest_day: ''
				},
				holidaysRestRules: {
					holiday_name: [{required: true, message: '节假日名称必填', type: 'error'}],
					holiday_start_date: [{required: true, message: '节假日起始日期必填', type: 'error'}],
					holiday_end_date: [
						{required: true, message: '考勤结束日期必填', type: 'error'},
						{validator: this.holiday_end_dateRules}
					],
					holiday_rest_day: [{required: true, message: '考勤总调休必填', type: 'error'}]
				},
				visibleModal: false,
				today: dayjs().format('YYYY-MM-DD'),
				nextDay: ''
			}
		},
		computed: {
			// 节假日时间差 天
			holidayDays(){
				return dayjs(this.holidaysRestData.holiday_end_date).diff(this.holidaysRestData.holiday_start_date, 'day') + 1
			}
		},
		methods: {
			// 调休结束日期校验规则
			holiday_end_dateRules(val){
				const end_date = dayjs(val)
				const start_date = dayjs(this.holidaysRestData.holiday_start_date)
				if(end_date.diff(start_date) < 0){
					return { result: false, message: '结束日期请不要小于开始日期', type: 'error' };
				} else {
					return { result: true};
				}
			},
			// 获取本月或下个月十五号
			getnextDay(){
				if(this.today.slice(8, 10) < 15){
					this.nextDay = this.today.slice(0, 8) + '14'
				} else {
					if(this.today.slice(5, 7) != 12 && this.today.slice(5, 7) < 9){
						this.nextDay = this.today.slice(0, 4) + '-0' + (parseInt(this.today.slice(5, 7)) + 1) + '-14'
					} else if(this.today.slice(5, 7) != 12 && this.today.slice(5, 7) > 8){
						this.nextDay = this.today.slice(0, 4) + '-' + (parseInt(this.today.slice(5, 7)) + 1) + '-14'
					} else {
						this.nextDay = (parseInt(this.today.slice(0, 4)) + 1) + '-01-14'
					}
				}
			},
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			onConfirm(){
				this.visibleModal = false
				this.$store.dispatch('attendance/holidaysRest', this.holidaysRestData).then(res => {
					res.status === 0 ? this.$message.success(res.message) : this.$message.error(res.message)
				})
			},
			// 节假日提交
			holidaysRestSubmit({ validateResult, firstError }){
				if(validateResult === true){
					this.visibleModal = true
				} else {
					this.$message.warning(firstError)
				}
			},
			// 节假日重置
			holidaysRestReset(){
				this.$message.success('重置成功')
			},
			// 获取考勤初始化数据
			getInitial(){
				this.$store.dispatch('attendance/getInitial').then(res => {
					if(res.status === 0){
						this.updateInitialData.init_day = res.data[0].init_day
						this.updateInitialData.rest_day = res.data[0].rest_day
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 初始化考勤提交
			updateInitialSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					this.$store.dispatch('attendance/updateInitial', this.updateInitialData).then(res => {
						res.status === 0 ? this.$message.success(res.message) : this.$message.error(res.message)
					})
				} else {
					this.$message.warning(firstError)
				}
			},
			// 初始化考勤重置
			updateInitialReset(){
				this.getInitial()
				this.$message.success('重置成功')
			}
		},
		created() {
			this.getInitial()
			this.getnextDay()
		}
	}
</script>

<style>
</style>